@keyframes headShake
  0%
    transform translateX(0)
  6.5%
    transform translateX(-6px) rotateY(-9deg)
  18.5%
    transform translateX(5px) rotateY(7deg)
  31.5%
    transform translateX(-3px) rotateY(-5deg)
  43.5%
    transform translateX(2px) rotateY(3deg)
  50%
    transform translateX(0)

@keyframes fadeInDown
  0%
    opacity 0
    transform translate3d(0, -20px, 0)
  100%
    opacity 1
    transform translate3d(0, 0, 0)

.signerStatus
  position relative
  // z-index 99999
  // top 0px
  // left 3px
  // right 3px
  // pointer-events auto

  .signerStatusWrap
    position relative
    // width 100%
    // height 100%
    // animation-name fadeInDown
    // animation-duration 400ms
    // animation-timing-function cubic-bezier(.82,0,.12,1)
    // z-index 40000

  .signerStatusTop
    position relative
    height 7px
    display none

    .signerStatusTopArrow
      background var(--ghostB)
      width 20px
      height 20px 
      border-top-left-radius 3px
      transform rotate(45deg)
      position absolute
      top 6px
      left 26px

  .signerStatusMain
    background var(--ghostZ)
    border-radius 20px
    // box-shadow 0px 0px 10px var(--ghostZ), 0px 10px 20px var(--ghostZ)
    padding 3px
    margin 12px 6px 21px 6px

.signerStatusHidden
  transform translateY(-40px)
  opacity 0
  pointer-events none

.signerUnlockWrap
  display flex
  align-items center
  flex-direction column
  transform translateY(0px)
  width 100%

  .signerUnlockHeader
    padding-bottom 32px
    text-transform uppercase
    font-size 13px
    font-weight 400
    text-shadow 0px 1px 2px var(--ghostX)

  .signerUnlockInput
    position relative
    height 61px
    width 100%
    border 0
    outline 0
    background var(--ghostZ)
    font-size 26px
    letter-spacing 6px
    display flex
    justify-content center
    align-items center
    text-align center
    color var(--outerspace)
    box-sizing border-box
    border-radius 8px
    border-top-right-radius 17px
    border-top-left-radius 17px
    position relative
    z-index 4
    padding-bottom 10px

  .signerUnlockInputLabel
    position absolute
    top 46px
    font-size 9px
    border-radius 8px
    border-bottom-left-radius 17px
    border-bottom-right-radius 17px
    display flex
    justify-content center
    align-items center
    text-transform uppercase
    margin-top 4px
    font-weight 400
    z-index 40000
    letter-spacing 1px
    margin-left -1px

  .signerUnlockSubmit
    height 30px
    background var(--ghostA)
    color var(--outerspace)
    font-size 12px
    box-sizing border-box
    padding-top 1px
    margin 3px 0px 0px 0px
    width 140px
    border-radius 8px
    display flex
    justify-content center
    align-items center
    font-weight 500
    cursor pointer
    width 100%
    text-transform uppercase
    cursor pointer 
    border-bottom-left-radius 17px
    border-bottom-right-radius 17px

    *
      pointer-events none

  .signerUnlockSubmit:hover
    background var(--ghostB)
    // animation 5s shake ease-in-out infinite alternate
    // box-shadow 0px 2px 8px var(--ghostZ)

  .signerUnlockSubmit:active
    transform translateY(0px)
    // animation shake-little 2s ease-in-out infinite
    // box-shadow 0px 2px 8px var(--ghostZ)

.headShake
  animation-duration 1s
  animation-fill-mode both
  animation-timing-function ease-in-out
  animation-name headShake
  transform translateZ(0)
